<template>
  <div class="index-three-pie" id="index_three_pie">

  </div>
</template>

<script>
  export default {
    name: "indexThreePie",
    props:['isChange'],
    watch:{
      isChange(){
        setTimeout(()=>{
          this.indexThreePie.resize();
        },500)
      }
    },
    mounted() {
      setTimeout(() => {
        this.initPie();
      }, 500);
    },
    methods: {
      initPie() {
        this.indexThreePie = this.$echarts.init(document.getElementById("index_three_pie"));
        this.indexThreePie.clear();
        this.indexThreePieDraw();
      },
      indexThreePieDraw() {
        let json = {
          "chargeData": {
            "amount": "4580.66",
            "descList": ["药品", "检查和化验", "卫生材料", "诊疗服务", "中药饮片"],
            "ratioList": ["25.06", "14.58", "38.51", "21.75", "0.1"],
            "dataList": [{
              "typeCode": "1",
              "typeName": "药品",
              "amount": "1148.02万元",
              "ratio": "25.06%"
            }, { "typeCode": "2", "typeName": "检查和化验", "amount": "667.85万元", "ratio": "14.58%" }, {
              "typeCode": "3",
              "typeName": "卫生材料",
              "amount": "1764.12万元",
              "ratio": "38.51%"
            }, { "typeCode": "4", "typeName": "诊疗服务", "amount": "996.27万元", "ratio": "21.75%" }, {
              "typeCode": "9",
              "typeName": "中药饮片",
              "amount": "4.4万元",
              "ratio": "0.1%"
            }]
          },
          "medicalData": {
            "amount": "7946.76",
            "descList": ["补偿比例", "个人支付比例"],
            "ratioList": ["61.26", "38.74"],
            "dataList": [{
              "typeCode": "1",
              "typeName": "补偿比例",
              "amount": "4868.20万元",
              "ratio": "61.26%"
            }, { "typeCode": "2", "typeName": "个人支付比例", "amount": "3078.56万元", "ratio": "38.74%" }]
          },
          "overallData": {
            "amount": "4868.20",
            "descList": ["统筹基金", "大病补助", "公务员补助"],
            "ratioList": ["4432.65", "264.36", "171.20"],
            "dataList": [{
              "typeCode": "1",
              "typeName": "统筹基金",
              "amount": "4432.65万元",
              "ratio": "91.05%"
            }, {
              "typeCode": "2",
              "typeName": "大病补助",
              "amount": "264.36万元",
              "ratio": "5.43%"
            }, {
              "typeCode": "3",
              "typeName": "公务员补助",
              "amount": "171.20万元",
              "ratio": "3.51%"
            }]
          },
          "personalData": {
            "amount": "3078.56",
            "descList": ["个人现金", "个人账户"],
            "ratioList": ["72.47", "6.74"],
            "dataList": [{
              "typeCode": "1",
              "typeName": "个人现金",
              "amount": "2231.21万元",
              "ratio": "72.47%"
            }, { "typeCode": "2", "typeName": "个人账户", "amount": "847.36万元", "ratio": "27.52%" }]
          }
        };
        let leftPieData = [];
        json.overallData.descList.forEach((item, dataIndex) => {
          leftPieData.push({
            name: item,
            value: json.overallData.ratioList[dataIndex],
            textStyle: {}
          });
        });
        let centerPieData = [];
        json.medicalData.descList.forEach((item, dataIndex) => {
          centerPieData.push({
            name: item,
            value: json.medicalData.ratioList[dataIndex],
            textStyle: {}
          });
        });
        let rightPieData = [];
        json.personalData.descList.forEach((item, dataIndex) => {
          rightPieData.push({
            name: item,
            value: json.personalData.ratioList[dataIndex],
            textStyle: {}
          });
        });
        let bigLineP = [{ name: "", x: "42%", y: "70%" }, { x: "30%", y: "70%" }];
        let bigLineN = [{ name: "", x: "59%", y: "60%" }, { x: "72%", y: "60%" }];
        let smallLine1 = [{ x: "26%", y: "58%" }, { x: "30%", y: "70%" }];
        let smallLine2 = [{ x: "74%", y: "48%" }, { x: "72%", y: "60%" }];
        this.indexThreePie.setOption({
          tooltip: {
            /* trigger: 'item',*/
            textStyle: {
              fontSize: 12
            },
            show: true,
            formatter: "{b} :<br/> {c}万元 ({d}%)"
          },
          legend: [
            {
              left: "65%",
              top: "70%",
              orient: "vertical",
              itemWidth: 10,
              itemHeight: 10,
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `${params.name}占比`
//                }
//              },
              textStyle: {
                color: "#fff"
              },
              data: centerPieData
            },
            {
              orient: "vertical",
              left: "13%",
              top: "65%",
              textStyle: {
                color: "#fff"
              },
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `${params.name}占比`
//                }
//              },
              /*selectedMode: false,*/
              itemWidth: 10,
              itemHeight: 10,
              data: leftPieData
            },
            {
              orient: "vertical",
              left: "84%",
              top: "35%",
              /*selectedMode: false,*/
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `${params.name}占比`
//                }
//              },
              textStyle: {
                color: "#fff"
              },
              itemWidth: 10,
              itemHeight: 10,
              data: rightPieData
            }
          ],
          series: [
            {
//              name: '占比',
              zlevel: 3,
              type: "pie",
              radius: ["33%", "50%"],
              center: ["50%", "69%"],
              minAngle: 5,
              data: centerPieData,
              clockwise: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              tooltip: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
                formatter: function(params) {
//                console.log(params)
                  let dataIndex = params.dataIndex;
                  return `<span style="color: #fff">病种支出</span></br>
                      <span style="color: #fff">支付类型: ${json.medicalData.dataList[dataIndex].typeName}</span></br>
                      <span style="color: #fff">金额: ${json.medicalData.dataList[dataIndex].amount}</span></br>
                      <span style="color: #fff">占比：${json.medicalData.dataList[dataIndex].ratio}</span>`;
                }
              },
              label: {
                show: true,
                position: "center",
                formatter: function(params) {
                  if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                    return `{a|${json.medicalData.amount}}\n{b|医疗支出}`;
                  } else {
                    return "";
                  }
                },
                rich: {
                  a: {
                    color: "#ffffff",
                    lineHeight: 20,
                    fontSize: 12,
                    fontWeight: 700
                  },
                  b: {
                    color: "#ffffff",
                    lineHeight: 20,
                    fontSize: 10
                  }
                }
              },
              itemStyle: {
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ["#ff9966", "#43aafe"];
                  return colorList[params.dataIndex];
                },
                borderWidth: 0
              }
            },
            {
//              name: '统筹基金支付比例占比',
              zlevel: 2,
              type: "pie",
              radius: ["27%", "40%"],
              center: ["20%", "40%"],
              minAngle: 5,
              clockwise: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              tooltip: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
                formatter: function(params) {
//                console.log(params)
                  let dataIndex = params.dataIndex;
                  return `<span style="color: #fff">病种支出</span></br>
                      <span style="color: #fff">补偿支付类型: ${json.overallData.dataList[dataIndex].typeName}</span></br>
                      <span style="color: #fff">金额: ${json.overallData.dataList[dataIndex].amount}</span></br>
                      <span style="color: #fff">占比：${json.overallData.dataList[dataIndex].ratio}</span>`;
                }
              },
              markLine: {
                symbol: "none",
                silent: true,//图形是否不响应和触发鼠标事件 默认为 false，即响应和触发鼠标事件。
                lineStyle: {
                  type: "solid",
                  color: "#ffffff"
                },
                data: [smallLine1, bigLineP]
              },
              itemStyle: {
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ["#fb912a", "#f0829d", "#ffe59f"];
                  return colorList[params.dataIndex];
                },
                borderWidth: 0
              },
              data: leftPieData,
              label: {
                show: true,
                position: "center",
                formatter: function(params) {
                  if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                    return `{a|${json.overallData.amount}}\n{b|统筹支出}`;
                  } else {
                    return "";
                  }
                },
                rich: {
                  a: {
                    color: "#ffffff",
                    lineHeight: 20,
                    fontSize: 12,
                    fontWeight: 700
                  },
                  b: {
                    color: "#ffffff",
                    lineHeight: 20,
                    fontSize: 10,
                  }
                }
              }
            },
            {
//              name: '个人支付比例占比',
              zlevel: 1,
              type: "pie",
              radius: ["27%", "40%"],
              center: ["75%", "25%"],
              minAngle: 5,
              data: rightPieData,
              clockwise: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              tooltip: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
                formatter: function(params) {
//                console.log(params)
                  let dataIndex = params.dataIndex;
                  return `<span style="color: #fff">病种支出</span></br>
                      <span style="color: #fff">个人支付类型: ${json.personalData.dataList[dataIndex].typeName}</span></br>
                      <span style="color: #fff">金额: ${json.personalData.dataList[dataIndex].amount}</span></br>
                      <span style="color: #fff">占比：${json.personalData.dataList[dataIndex].ratio}</span>`;
                }
              },
              itemStyle: {
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ["#8278f8", "#3be0a4"];
                  return colorList[params.dataIndex];
                },
                borderWidth: 0.01
              },
              markLine: {
                symbol: "none",
                silent: true,
                lineStyle: {
                  type: "solid",
                  color: "#ffffff"
                },
                data: [smallLine2, bigLineN]
              },
              label: {
                show: true,
                position: "center",
                formatter: function(params) {
                  if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                    return `{a|${json.personalData.amount}}\n{b|个人支出}`;
                  } else {
                    return "";
                  }
                },
                rich: {
                  a: {
                    color: "#ffffff",
                    lineHeight: 20,
                    fontSize: 12,
                    fontWeight: 700
                  },
                  b: {
                    color: "#b6eeff",
                    fontSize: 10,
                    lineHeight: 20
                  }
                }
              }
            }
          ]

        });
      }
    }
  };
</script>

<style scoped>
  .index-three-pie {
    width: 100%;
    height: 40%;
    color: #fff;
  }
</style>
